<template>
	<div class="app">
		<div class="module-com new_wrap">
			<div class="module-det">
				<div>
					<span>员工代销提成比例</span>
					<div class="dis-flex">
						<input type="number" class="setting-inp" v-model="form.staff_commission_rate" />
						<span>%</span>
					</div>
				</div>
			</div>
		</div>
		<div class="prompt-text">代销佣金返还比例，如设置50%员工可得50%提成剩余50%将由 主账号获得。</div>
		<div class="button-com" @click="confirmFn">保存</div>
	</div>
</template>

<script>
import { setCommission, getCommission } from '@/api/setting'
export default {
	name: 'set-commission',
	data() {
		return {
			form: {
				staff_commission_rate: ''
			}
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			getCommission().then(res => {
				this.form.staff_commission_rate = res.data.rate || 1
			})
		},
		confirmFn() {
			if (!this.form.staff_commission_rate) {
				this.$toast('请先设置分佣比例！')
				return false
			}
			setCommission(this.form).then(res => {
				this.$toast('设置成功！')
			})
		}
	}
}
</script>

<style lang='scss' scoped>
	.app {
		padding-top: 20px;
		min-height: calc(100vh - 20px);
		background-color: #f7f7f7;
	}
	.prompt-text {
		color: $fontColor3;
		padding: 40px 30px 60px;
		line-height: 36px;
	}
	.module-com {
		background-color: #fff;
		padding: 14px 30px;
	}
	.dis-flex {
		display: flex;
		align-items: center;
	}
	.new_wrap {
		.module-det {
			color: #666666;
			font-size: 24px;
			& > div {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.setting-inp {
				width: 120px;
				height: 70px;
				border: 2px solid #dddddd;
				border-radius: 10px;
				margin: 0 16px;
				text-align: center;
				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.button-com {
		width: 95%;
		height: 90px;
		line-height:90px;
		// display: inline-block;
		color: #3A1B04;
		font-size: 24px;
		background-color: $mainColor;
		border-radius: 10px;
		border: 1px solid $mainColor;
		text-align: center;
		margin:auto;
	}
</style>
